<template>
	<view>
		<view class="whole" v-if="todoList.length==0">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		<view v-if="todoList.length!=0">
			<view class="card" v-for="(item,index) in todoList" :key="index" @click="details(item)">
				<view class="top">
					<image src="/static/image/MyToDoList.png" mode="aspectFit"></image>
					<text class="name">{{item.title}}</text>
				</view>
				<hr />
				<view class="center">
					<table cellSpacing="0" cellpadding="1" width="100%" class="ctl">
						<tBody>
							<!-- <tr>
							<td class="td_1">发送人:</td>
							<td class="td">{{item.senderText}}</td>
						</tr> -->
							<tr>
								<td class="td_1">状态:</td>
								<td class="td">{{item.statusText}}</td>
							</tr>
							<tr>
								<td class="td_1">情况紧急:</td>
								<td class="td">{{item.urgencyText}}</td>
							</tr>
							<tr>
								<td class="td_1">发送时间:</td>
								<td class="td">{{item.sendTime}}</td>
							</tr>
							<tr>
								<td class="td_1">截止期限:</td>
								<td class="td">{{item.deadline}}</td>
							</tr>
						</tBody>
					</table>
				</view>
			</view>
			<!-- <text class="loading-text">
			{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
		</text> -->
			<view class="margin-bottom"></view>
		</view>
	</view>
</template>

<script>
	//公司说没有分页功能
	export default {
		data() {
			return {
				todoList: [], //待办列表
				key: '',
			}
		},
		onLoad() {
			//获取待办列表
			this.todo()
		},
		onShow() {
			this.onSocketMessage()
		},
		// onPullDownRefresh() {
		// 	uni.startPullDownRefresh();
		// 	this.todo();
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// },
		methods: {
			//	打开成功监听服务器返回的告警信息
			onSocketMessage() {
				uni.onSocketMessage(res => {
					// console.log(JSON.parse(res.data));
					const data = JSON.parse(res.data)
					if (data.code == "99") {
						if (data.hasOwnProperty("msg")) {
							if (data.msg != 'ping') {
								getApp().globalData.getSocketMsg(res.data);
								if (data.msgType == "com.plugins.pending.open") {
									console.log(data);
									this.todo();
								}
							}
						}
					}
				});
			},
			//获取待办列表
			async todo() {
				const res = await this.$myRequest({
					url: '/api-portal/pendingItem/',
					method: "get",
					data: {}
				})
				if (res.success == true) {
					// console.log(res.body.titleMap)
					for (var key in res.body.titleMap) {
						this.key = res.body.dataMap[key]
						this.todoList = this.todoList.concat(this.key)
					}
				}
			},
			//跳转页面
			details(todoList) {
				if (todoList.moduleName == "工作任务待办") {
					console.log(todoList.flagId)
					uni.navigateTo({
						url: '/pages/workOrder/missionInfo/missionInfo?id=' + todoList.flagId
					})
				} else {
					uni.navigateTo({
						url: '/pages/approve/index'
					})
				}
				uni.setStorage({
					key: "newsTop",
					data: this.scrollTop
				})
			},
		}
	}
</script>

<style lang="less">
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;

		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}

	.loading-text {
		margin-bottom: 40rpx;
		height: 50upx;
		line-height: 80upx;
		font-size: 30rpx;

		// margin: 100rpx;
		color: #959595;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.card {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 10px;
		background-color: #FFFFFF;

		hr {
			width: 100%;
			height: 1px;
			border: 0;
			margin-bottom: 10rpx;
			background-color: #c3c7cc;
		}

		.top {
			margin: 0 20rpx;
			display: flex;
			height: 80rpx;
			text-align: center;

			image {
				width: 60rpx;
				height: 80rpx;
			}

			.name {
				margin-left: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 35rpx;
			}
		}

		.center {
			margin: 0 20rpx;
			padding: 5rpx 0 20rpx 0;

			// background-color: #00ff7f;
			.ctl {
				table-layout: fixed;

				.td_1 {
					color: #959595;
					vertical-align: top;
					width: 25%;
					word-break: break-all;
				}

				.td {
					word-break: break-all;
					color: #000000;
				}
			}
		}

		.bottom {
			margin: 0 20rpx;
			padding: 5rpx 0;

			// background-color: #007AFF;
			.ctl {
				table-layout: fixed;

				.td_1 {
					vertical-align: top;
					width: 25%;
					word-break: break-all;
				}

				.td {
					word-break: break-all;
					color: #ffaa00;
				}
			}
		}
	}

	.margin-bottom {
		height: 80rpx;
	}
</style>
